
<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
          <div class="hei10"></div>
          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">当前位置：分销后台><router-link to="/qudaoshouzhi">渠道收支</router-link>>渠道趋势</div>
          <div class="hei10"></div>

<!--        <div class="team">-->
<!--          <div class="powertop">-->
<!--        		<router-link class="powertopli powertopact" to="/qudaoshouzhi">渠道收支</router-link>-->
<!--        	</div>-->
<!--        </div>-->
        <div class="qdcenter" style="padding-top: 0">
          <div class="qdtitle">渠道业务趋势</div>
        </div>
        <div style="padding-top: 20px;">
          <div class="flex" style="margin-left: 40px; margin-bottom: 20px;">
            <el-date-picker v-model="time2" value-format="yyyy-MM-dd" :clearable="false"  type="daterange" range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份"></el-date-picker>
            <el-button type="danger" style="margin-left: 20px" @click="getxian(1)">按天展示</el-button>
            <el-button type="danger" @click="getxian(2)">按周展示</el-button>
            <el-button type="danger" @click="getxian(3)">按月展示</el-button>
          </div>
          <div id="main" v-loading="loading2"></div>
          <div class="qdcenter">
            <div class="qdtitle">渠道商品情况</div>
            <div class="qdtop">
              <div class="flex" style="justify-content: space-between;">
                <div class="flex">
                  <div style="line-height: 36px;">商品名称</div>
                  <div><el-input v-model="input" placeholder="请输入内容"></el-input></div>
                  <div><el-button type="danger" @click="search">搜索</el-button></div>
                </div>
                <div class="flex" style="justify-content: right;">
                  <div class="month" @click="month(0)">当前月</div>
                  <div class="month" @click="month(1)">上一月</div>
                  <div class="month" @click="month(2)">下一月</div>
                  <el-date-picker v-model="time" @change="timechange" value-format="yyyy-MM" :clearable="false" type="monthrange" range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份"></el-date-picker>
                </div>
              </div>
            </div>
            <div class="qdlist" v-loading="loading">
              <div class="list listth flex">
                  <div class="th">商品名称</div>
                  <div class="th">下单数量</div>
                  <div class="th">发货数量</div>
<!--                  <div class="th">销售收入</div>-->
<!--                  <div class="th">预期佣金发放率</div>-->
                  <div class="th">实际佣金发放率</div>
                  <div class="th">预估佣金收入</div>
                  <div class="th">实际佣金收入</div>
              </div>
              <div class="list listtd flex" v-for="item in list" :key="item.id">
                  <div class="td">{{item.title}}</div>
                  <div class="td">{{item.order_count}}</div>
                  <div class="td">{{item.deliver_count}}</div>
<!--                  <div class="td">暂无</div>-->
<!--                  <div class="td">{{item.pre_rate}}</div>-->
                  <div class="td">{{item.commission_rate}}</div>
                  <div class="td">{{item.profit}}</div>
                  <div class="td">{{item.commission_sum}}</div>

              </div>
              <el-pagination style="text-align: right; padding: 20px;" background layout="total,prev, pager, next" :current-page="page" @current-change="fanye" :page-size="pagesize" :total="total"></el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <foot></foot> -->
  </div>
</template>

<script>
  import axios from "axios";
  import moment from 'moment'
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  export default {
    components: {
      "left": left,
      "top": top,
      "foot": foot
    },
    name: 'kanban',
    data() {
      return {
        time:[],
        time2:[],
        timesearch:false,
        input:"",
        page:1,
        pagesize:20,
        total:0,
        list:"",
        loading:true,
        loading2:false,
        charts: '',
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value'
        },

        series: [
          {
            name: '下单数量',
            data: [],
            type: 'line',
            smooth: true,
            cursor:'point',
            itemStyle:{
              borderWidth:10
            }
          },
          {
            name: '发货数量',
            data: [],
            type: 'line',
            smooth: true,
            cursor:'point'
          },
          {
            name: '佣金发放率',
            data: [],
            type: 'line',
            smooth: true,
            cursor:'point'
          },
          {
            name: '推广支出',
            data: [],
            type: 'line',
            smooth: true,
            cursor:'point'
          },
          {
            name: '利润',
            data: [],
            type: 'line',
            smooth: true,
            cursor:'point'
          },
        ]
      }
    },
    created() {
        this.loading = true

        this.time[0] = moment().format("YYYY-MM-01 0:00:00");
        this.time[1] = moment().format("YYYY-MM-DD 24:00:00");

        this.time2[0] = moment().subtract(30, 'days').format("YYYY-MM-DD");
        this.time2[1] = moment().format("YYYY-MM-DD");

        this.getlist()
    },
    mounted(){
        this.$nextTick(function() {
            this.getxian(1)
        })
    },
    methods:{
      daochu:function(){

      },
      month:function(id){
        if(id == 0){
          // this.time[0] = moment().format("YYYY-MM-01");
          // this.time[1] = moment().endOf('month').format("YYYY-MM-DD");
          this.time = [moment().format("YYYY-MM-01 0:00:00"),moment().endOf('month').format("YYYY-MM-DD 24:00:00")]
        }
        if(id == 1){
          if(this.timesearch == true){
            // this.time[0] = moment().subtract(1, 'months').format("YYYY-MM-01");
            // this.time[1] = moment().subtract(1, 'months').endOf('month').format("YYYY-MM-DD");
            this.time = [moment().subtract(1, 'months').format("YYYY-MM-01 0:00:00"),moment().subtract(1, 'months').endOf('month').format("YYYY-MM-DD 24:00:00")]
          }else{
            // this.time[0] = moment(this.time[0]).subtract(1, 'months').format("YYYY-MM-01");
            // this.time[1] = moment(this.time[1]).subtract(1, 'months').endOf('month').format("YYYY-MM-DD");
            this.time = [moment(this.time[0]).subtract(1, 'months').format("YYYY-MM-01 0:00:00"),moment(this.time[1]).subtract(1, 'months').endOf('month').format("YYYY-MM-DD 24:00:00")]
          }
        }
        if(id == 2){
          if(this.timesearch == true){
            // this.time[0] = moment().add(1, 'months').format("YYYY-MM-01");
            // this.time[1] = moment().add(1, 'months').endOf('month').format("YYYY-MM-DD");
            this.time = [moment().add(1, 'months').format("YYYY-MM-01 0:00:00"),this.time[1] = moment().add(1, 'months').endOf('month').format("YYYY-MM-DD 24:00:00")]
          }else{
            // this.time[0] = moment(this.time[0]).add(1, 'months').format("YYYY-MM-01");
            // this.time[1] = moment(this.time[1]).add(1, 'months').endOf('month').format("YYYY-MM-DD");
            this.time = [moment(this.time[0]).add(1, 'months').format("YYYY-MM-01 0:00:00"),moment(this.time[1]).add(1, 'months').endOf('month').format("YYYY-MM-DD 24:00:00")]
          }
        }
        this.timesearch = false
        this.loading = true
        this.getlist();
      },
      getxian:function(id){
        this.loading2 = true
        if(id == 1){
          var that = this
          axios.get('/api/plan-market/source/day/profit?start='+this.time2[0]+'&end='+this.time2[1])
            .then(response => {
              if(response.data.msg.code == 0){
                  var list = response.data.data
                  this.series[0].data = []
                  this.xAxis.data = []

                  for( var i in list){
                    that.xAxis.data.push(moment(this.time2[0]).add(i, 'days').format("MM-DD"))
                    that.series[0].data.push(list[i].order_count)
                    that.series[1].data.push(list[i].deliver_count)
                    that.series[2].data.push(list[i].commission_rate)
                    that.series[3].data.push(list[i].propagate_expend)
                    that.series[4].data.push(list[i].income)
                    that.drawPie('main')
                    that.loading2 = false
                  }
              }else{
                that.$message.error(response.data.msg.info);
              }
            })
        }
        if(id == 2){
          var that = this
          axios.get('/api/plan-market/source/week/profit?start='+this.time2[0]+'&end='+this.time2[1])
            .then(response => {
              if(response.data.msg.code == 0){
                var list = response.data.data
                this.series[0].data = []
                this.xAxis.data = []

                for( var i in list){
                  that.xAxis.data.push(moment(this.time2[0]).add(i*7, 'days').format("MM-DD"))
                  that.series[0].data.push(list[i].order_count)
                  that.series[1].data.push(list[i].deliver_count)
                  that.series[2].data.push(list[i].commission_rate)
                  that.series[3].data.push(list[i].propagate_expend)
                  that.series[4].data.push(list[i].income)
                  that.drawPie('main')
                  that.loading2 = false
                }
              }else{
                that.$message.error(response.data.msg.info);
              }
            })
        }
        if(id == 3){
          var that = this
          axios.get('/api/plan-market/source/month/profit?start='+this.time2[0]+'&end='+this.time2[1])
            .then(response => {
              if(response.data.msg.code == 0){
                var list = response.data.data
                this.series[0].data = []
                this.xAxis.data = []

                for( var i in list){
                  that.xAxis.data.push(moment(this.time2[0]).add(i, 'months').format("MM-DD"))
                  that.series[0].data.push(list[i].order_count)
                  that.series[1].data.push(list[i].deliver_count)
                  that.series[2].data.push(list[i].commission_rate)
                  that.series[3].data.push(list[i].propagate_expend)
                  that.series[4].data.push(list[i].income)
                  that.drawPie('main')
                  that.loading2 = false
                }
              }else{
                that.$message.error(response.data.msg.info);
              }
            })
        }
      },
      drawPie:function(id){
        var echarts = require('echarts');
        this.charts = echarts.init(document.getElementById(id));
        this.charts.setOption({
          color:['#64BE29','#FF843D','#f07c82','#619ac3','#15231b','#fcc515'],
          grid: {
              left: '3%',
              right: '3%',
              bottom: '3%',
              containLabel: true
          },
          xAxis:this.xAxis,
          yAxis:this.yAxis,
          tooltip: {
              trigger: 'axis',
              formatter: '{b0}<br />{a0}:{c0}<br />{a1}:{c1}<br />{a2}:{c2}%<br />{a3}:{c3}<br />{a4}:{c4}',
              axisPointer: {
                  type: 'cross',
                  label: {
                      backgroundColor: '#6a7985'
                  }
              }
          },
          legend: {
            data:['下单数量','发货数量','佣金发放率','推广支出','利润']
          },
          series: this.series,
        })
      },
      timechange:function(){
          this.timesearch = true
          this.start = this.time[0]
          this.end = this.time[1]
          this.loading = true
          this.getlist()
      },
      search:function(){
          this.page = 1
          this.loading = true
          this.getlist()
      },
      //翻页
      fanye:function(page){
      	this.loading = true
      	this.page = page
      	this.getlist()
      },
      //获取列表
      getlist:function(){

          var that = this
          axios.get('/api/plan-market/page/source/profit?page='+this.page+'&page_size='+this.pagesize+'&start='+this.time[0]+'&end='+this.time[1]+'&name='+this.input)
          	.then(response => {
          		if(response.data.msg.code == 0){
                        that.list = response.data.data.data
                        that.total = response.data.data.total
                        that.loading = false
          		}else{
          			that.$message.error(response.data.msg.info);
          		}
          	})
      },
    }
  }
</script>

<style lang="scss" scoped>
  .index{

			.team{ background: #F9F9F9; }
			.powertop{ display: flex; width: 640px; }
			.powertopli{ flex-basis: 160px; line-height: 45px; border-top: 4px #F9F9F9 solid; color: #727272; border-right: 1px #EAEAEA solid; font-size: 14px; text-align: center;}
			.powertopact{ background: #FFFFFF; border-top: 4px #DD2727 solid;}
       #main{ width: 100%; height:300px;}
       .qdcenter{ padding-top: 30px;
         .qdtitle{ padding:0 0 0px 20px; font-size: 16px; background: #EAEAEA; line-height: 40px;}
         .list{ text-align: center; line-height: 50px;
           .th{ flex: 1; background: #EAEAEA; font-weight: bold;}
           .td{ flex: 1; border-bottom: 1px #EAEAEA solid; height: 50px; overflow: hidden; font-size: 14px;}
         }
       }
       .qdtop{padding: 50px 20px;
         div{ margin-right: 10px;}
         .el-button--danger{ padding: 9px 10px !important;}
         .month{  line-height:34px; position: relative; height: 34px; top:1px; border:1px #EAEAEA solid; font-size: 14px; padding: 0 6px; cursor:pointer; border-radius: 5px;}
         .mact{ background: #EEF7FF; color:#FFFFFF;}
       }
       .flex{ display: flex;}

	}
</style>
